<template>
    <NewsDetail v-if="info.visible" :info="info" @onChange="row=> info=row " />
    <div v-else class="page-wrapper" style="height:auto; background-image: linear-gradient(to bottom, #ebf8ff, #f5f7fa ); ">
        <div class="page-content" style="padding:160px 0 60px 0;">
            <div class="title" style="height:40px; line-height:56px; font-weight:lighter; margin-bottom:100px;">了解华翊最新动态</div>    
            <div class="tag-container" style="margin-bottom:30px;">
                <div
                    v-for="item in tagList"
                    :key="item"
                    :class="{ 'tag-item':true, 'selected':item === current }"
                    @click="current = item"
                >
                    {{ item }}
                </div>
            </div>   
            <div class="card-container" style="margin-bottom:46px; ">
                <div
                    v-if="filterList.length"
                    v-for="(item, index) in filterList"
                    :key="index"
                    class="card"
                    @click="info = { ...item, visible:true }"
                    style="width:calc( 33.3% - 16px )"
                >
                    <div class="card-image" :style="{ backgroundImage:`url(${getFullPath(item.coverImagePath)})` }"></div>
                    <div class="card-content">
                        <div class="card-title">{{ item.tittle }}</div>
                        <div class="card-desc">{{  htmlToString(item.content) }}</div>
                        <div class="card-extra">
                            <div style="color:#99A0AE; font-size:16px; ">{{  item.createTime }}</div>
                            <div class="tag">{{ item.category }}</div>
                        </div>
                    </div>
                </div>
                <div v-else class="empty-wrapper">
                    <img :src="emptyBg" />
                </div>  
            </div> 
            <el-pagination 
                v-if="filterList.length > 9 "
                class="custom-pagination"
                v-model:current-page="pageInfo.currentPage" 
                v-model:page-size="pageInfo.pageSize"
                v-model:total="total" 
                background 
                layout="prev,pager,next" 
            />
        </div>
    </div>
</template>
<script setup>
    import { watch, ref, reactive, onMounted } from 'vue';
    import { getFullPath, getContentList } from '@/api/global.js';
    import avatarImg from '../../../public/test1.png';
    import emptyBg from '../../../public/empty.png';
    import NewsDetail from './NewsDetail.vue';
    const tagList = ['全部', '华翊动态', '行业深度', '沙龙活动', '产品咨询'];
    const current = ref('全部');
    const pageInfo = reactive({
        currentPage:1,
        pageSize:9
    });
    const total = ref(0);
    const info = ref({});
    const list = ref([]);
    const filterList = ref([]);
    function htmlToString(html) {
      var tempDiv = document.createElement("div");
      tempDiv.innerHTML = html;
      return tempDiv.textContent || tempDiv.innerText || "";
    }
    watch(current, ()=>{
        pageInfo.currentPage = 1;
        filterList.value = current.value === '全部' ? list.value : list.value.filter(i=>i.category === current.value )
    })
    watch([pageInfo.currentPage], ()=>{
        fetchContentList();
    })
    const fetchContentList = ()=>{
        getContentList({ page:pageInfo.currentPage, pageSize:pageInfo.pageSize, contentType:'动态' })
        .then(res=>{
            if ( res.data.code === 200 ) {
                list.value = res.data.data;
                filterList.value = res.data.data;
                total.value = res.data.total;
            }
        })
    }
    onMounted(()=>{
        fetchContentList();
    })
</script>
<style scoped>
    .tag-container {
        display:flex;
        justify-content: center;
    }
    .tag-container .tag-item {
        padding:10px;
        border: 1px solid #e1e4ea;
        border-radius:26px;
        box-shadow: 0px 1px 2px #0a0d1408;
        background:transparent;
        font-size:14px;
        color:#99A0AE;
        transition: all 0.3s ease-in;
        margin-right:26px;
        cursor: pointer;
    }
    .tag-container .tag-item:last-child {
        margin-right:0;
    }
    .tag-container .tag-item:hover {
        border-color:transparent;
        color:#000;
    }
    .tag-container .tag-item.selected {
        border: 1px solid #335cff;
        background:#fff;
        color:#335cff;
    }
    .tag-container .tag-item.selected:hover {
        border-color:transparent;
        background:#dfe8fd;
    }
</style>